<template>
  <div class="quotation-container">
    <div class="top">
      <small-card
        class="small-card"
        :title="item.title"
        :bg-color="item.bgColor"
        :end-val="item.endVal"
        :is-up="item.isUp"
        :percent-num="item.percentNum"
        :icon-class="item.iconClass"
        v-for="(item, index) in quotationCardListData"
        :key="index"
      ></small-card>
    </div>
    <div class="quotation-title">
      <div class="left">
        <h4>報價列表</h4>
        <span>管理所有客戶報價信息</span>
      </div>
      <div class="right">
        <el-select placeholder="全部業務類型"></el-select>
        <el-button type="primary" @click.native="addQuotationDialogVisible = true">
          <svg-icon icon-class="staff-add"></svg-icon>
          建立報價
        </el-button>
      </div>
    </div>
    <div class="table-wrap br-20">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="報價編號">
          <template>
            <div>
              <div class="text-1">QUOTE-2024-001</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="客戶名稱">
          <template>
            <div class="text-1">XXXX科技公司</div>
            <div class="text-2">zhangsan@example.com</div>
          </template>
        </el-table-column>
        <el-table-column label="業務類型">
          <template>張三</template>
        </el-table-column>
        <el-table-column label="創建時間">
          <template>
            <span>2025-08-06</span>
          </template>
        </el-table-column>
        <el-table-column label="狀態">
          <template>
            <span class="status success">已成交</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="text" size="small" @click.native="quotationDetailVisible = true">查看</el-button>
            <el-button type="text" size="small" @click.native="editQuotation">編輯</el-button>
            <el-button type="text" size="small">刪除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-foot">
        <div class="statistics">共24名員工 最近更新:2025-07-27 10:45</div>
        <div>
          <el-pagination background layout="sizes, prev, pager, next, jumper" :total="1000"></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog class="add-quotation-dialog" :title="title" :visible.sync="addQuotationDialogVisible" width="680px">
      <el-form :model="addQuotationFormData" label-position="top" inline>
        <el-form-item label="報價編號" required>
          <el-input v-model="addQuotationFormData.num" placeholder="自動生成或手動輸入" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="客戶名稱" required>
          <el-input v-model="addQuotationFormData.num" placeholder="輸入客戶公司名稱" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="聯絡人" required>
          <el-input v-model="addQuotationFormData.num" placeholder="請輸入聯絡人姓名" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="聯繫電話" required>
          <el-input v-model="addQuotationFormData.num" placeholder="請輸入聯絡電話" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="業務來源" required>
          <el-select v-model="addQuotationFormData.num" placeholder="請選擇業務來源">
            <el-option></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="報價內容" required style="width: 100%">
          <el-input type="textarea" v-model="addQuotationFormData.num" placeholder="詳細描述活動內容，服務項目等" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="條款" style="width: 100%">
          <el-input type="textarea" v-model="addQuotationFormData.num" placeholder="付款方式、服務條款等" auto-complete="off"></el-input>
        </el-form-item>
        <div style="display: flex; justify-content: space-between; align-items: center; font-size: 14px; line-height: 20px; margin-bottom: 8px">
          <span>報價明細</span>
          <el-button type="text" @click.native="addDetail">添加項目</el-button>
        </div>
        <el-table :data="detailData" :header-cell-style="{ background: 'rgba(60,88,252,0.08)' }">
          <el-table-column label="項目名稱">
            <template>
              <el-input size="small" placeholder="項目名稱"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="描述">
            <template>
              <el-input size="small" placeholder="描述"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="數量">
            <template>
              <el-input size="small" placeholder="數量"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="單價">
            <template>
              <el-input size="small" placeholder="單價"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="小計">
            <template>
              <span></span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template>
              <svg-icon style="font-size: 18px; cursor: pointer" icon-class="delete"></svg-icon>
            </template>
          </el-table-column>
        </el-table>
        <div style="color: #000; font-weight: bold; text-align: right; margin-top: 15px">統計：￥0.00元</div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addQuotationDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddQuotation">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog class="quotation-detail-dialog" title="報價詳情" :visible.sync="quotationDetailVisible" width="680px">
      <div class="detail-wrap br-15">
        <div class="list">
          <div class="list-item">
            <span>報價編號：</span>
            <span>COST-001</span>
          </div>
          <div class="list-item">
            <span>客戶名稱：</span>
            <span>COST-001</span>
          </div>
          <div class="list-item">
            <span>業務類型：</span>
            <span>COST-001</span>
          </div>
          <div class="list-item">
            <span>建立日期：</span>
            <span>COST-001</span>
          </div>
          <div class="list-item">
            <span>狀態：</span>
            <span class="success">COST-001</span>
          </div>
        </div>
        <div class="tb-head br-5">
          <div class="item head-item">項目名稱</div>
          <div class="item head-item">描述</div>
          <div class="item head-item">數量</div>
          <div class="item head-item">單價</div>
          <div class="item head-item">小計</div>
        </div>
        <div class="detail" style="height: 180px">
          <el-scrollbar style="height: 100%">
            <div class="detail-item br-5" v-for="item in 5" :key="item">
              <div class="item">項目名稱</div>
              <div class="item">描述</div>
              <div class="item">1</div>
              <div class="item">1</div>
              <div class="item">10</div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SmallCard from '@/components/SmallCard/index.vue'

export default {
  name: 'quotation-management',
  components: { SmallCard },
  data() {
    return {
      title: '建立報價',
      addQuotationDialogVisible: false,
      quotationDetailVisible: false,
      addQuotationFormData: {},
      quotationCardListData: [
        { title: '本月報價', bgColor: '#DEE5FF', endVal: 24, isUp: false, percentNum: 12, iconClass: 'quotation-card-1' },
        { title: '已成交', bgColor: 'rgba(88,188,206,0.15)', endVal: 16, isUp: false, percentNum: 12, iconClass: 'quotation-card-2' },
        { title: '待跟進', bgColor: 'rgba(249,178,128,0.23)', endVal: 8, isUp: false, percentNum: 12, iconClass: 'quotation-card-3' },
        { title: '已拒絕', bgColor: 'rgba(255,6,6,0.05)', endVal: 24, isUp: true, percentNum: 12, iconClass: 'quotation-card-4' }
      ],
      tableData: [{}],
      detailData: [{}]
    }
  },
  methods: {
    editQuotation() {
      this.title = '編輯報價'
      this.addQuotationDialogVisible = true
    },
    addDetail() {},
    submitAddQuotation() {}
  }
}
</script>

<style scoped lang="less">
.quotation-container {
  .top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
    .small-card {
      margin-right: 15px;
      //min-width: 300px;
      flex: auto;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .quotation-title {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 15px;
    .left {
      h4 {
        font-size: 16px;
        line-height: 19px;
        margin: 0 0 11px 0;
      }
      span {
        font-size: 12px;
        line-height: 15px;
        color: rgba(0, 0, 0, 0.5);
      }
    }
    .right {
      .el-select {
        margin-right: 16px;
      }
    }
  }
  .table-wrap {
    background: #fff;
    padding: 35px 38px 35px 30px;
    .el-table {
      .status {
        font-size: 14px;
        line-height: 20px;
        padding: 4px 16px;
        border-radius: 14px;
        display: inline-block;
        &.success {
          background: rgba(88, 206, 147, 0.19);
          color: #128f51;
        }
        &.warning {
          background: rgba(249, 178, 128, 0.19);
          color: #f9b280;
        }
        &.danger {
          background: rgba(255, 6, 6, 0.19);
          color: #ff0606;
        }
      }
    }
    .table-foot {
      margin-top: 14px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;
      .statistics {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.5);
      }
    }
  }
  .quotation-detail-dialog {
    .detail-wrap {
      background: rgba(60, 88, 252, 0.05);
      padding: 24px;
      .list {
        &-item {
          font-size: 16px;
          line-height: 22px;
          margin-bottom: 23px;
          span:first-child {
            margin-right: 10px;
          }
          .success {
            color: #128f51;
          }
        }
      }
      .detail {
        ::v-deep .el-scrollbar__wrap {
          overflow-x: hidden;
        }
      }
      .tb-head .item,
      .detail-item .item {
        font-size: 14px;
        line-height: 20px;
        color: rgba(0, 0, 0, 0.5);
        margin-bottom: 16px;
        text-align: center;
        padding: 12px;
        background: #fff;
        flex: auto;
      }
      .tb-head,
      .detail-item {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        overflow: hidden;
        .head-item {
          background: rgba(60, 88, 252, 0.08);
        }
      }
    }
  }
}
</style>
